import React, { useState, useEffect } from 'react'

export default function App() {
  const [count, setCount] = useState(1)
  const [list, setList] = useState([])

  // 传入空数据，意思是没有依赖，只会执行一次
  useEffect(() => {
    console.log('first1')
    return () => {
      console.log('second1')
    }
  }, [])

  // 有依赖，依赖变更时，会执行
  useEffect(() => {
    console.log('first2')
    let arr = []
    for (let i = 0; i < 10; i++) {
      arr.push(count + i)
    }
    setList(arr)
    return () => {
      console.log('second2')
    }
  }, [count])

  return (
    <div>
      <h1>App-{count}</h1>
      <button onClick={() => setCount(count + 1)}>click</button>
      <ul>
        {list.map((item) => {
          return <li key={item}>{item}</li>
        })}
      </ul>
    </div>
  )
}
